<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <link href="../f5/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <style type="text/css">
            body,html {
                padding: 0;
                margin: 0;
                width: 100%;
                background-color: #fff;
            }
            a,a:hover {
                text-decoration: none;
                color: inherit;
            }
            /* 設置頭部导航条样式 */
            .nav {
                width: 100%;
                height: 102px;
            }
            .nav .top {
                width: 100%;
                height: 28px;
                background-color: #222222;
                line-height: 28px;
                font-size: 18x;
                z-index: 15;
            }
            .nav .top>.container {
                width: 1106px;
                margin: auto;
                line-height: 28px;
                color: #fff;
                font-size: 12px;
            }
            .nav .top>.container .right {
                float: right;
                height: 28px;
                line-height: 28px;
                color: #fff;
                font-size: 12px;
                font-weight: bold;
            }
            .nav .top>.container .right span {
                margin-left: 7px;
            }
            .nav .content {
                position: fixed;                
                width: 100%;
                height: 74px;
                background-color: #fff;
                z-index: 10;
                transition: height 0.3s;
                box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
            }
            .nav .content>.container {
                width: 1128px;
                padding: 0 11px;
                height: 74px;
                margin: auto;
                box-sizing: border-box;
            }
            .nav .content>.container>.left {
                float: left;
                margin-top: 20px;
                margin-right: 60px;
                width: 133px;
            }
            .nav .content>.container>.middle {
                float: left;
                width: 755px;
                height: 100%;
            }
            .nav .content>.container>.middle>.left {
                float: left;
                width: 484px;
                height: 100%;
            } 
            .nav .content>.container>.middle>.left>.left {
                float: left;
                height: 100%;
                width: 263px;
                line-height: 74px;
                cursor: pointer;
            }
            .nav .content>.container>.middle>.left>.left:hover>.info {
                color: aqua;
            }
            .nav .content>.container>.middle>.left>.left>span {
                float: left;
                line-height: 74px;
            }
            .nav .content>.container>.middle>.left>.left>.info {
                float: left;
                font-size: 18px;
                color: #282828;
                line-height: 74px;
                margin-right: 5px;
            }
            .nav .content>.container>.middle>.left>.left>.info:hover~ .left-menu{
                display: block;
            }
            .nav .content>.container>.middle>.left>.left>.left-menu {
                display: none;
                position: absolute;
                top: 74px;
                left: 0;
                width: 100%;
                height: 404px;
                background-color: aqua;
                text-align: center;
            }
            .nav .content>.container>.middle>.left>.right {
                float: left;
                width: 220px;
                height: 100%;
                line-height: 74px;
                cursor: pointer;
            }
            .nav .content>.container>.middle>.left>.right:hover>.info {
                color: aqua;
            }
            .nav .content>.container>.middle>.left>.right>span {                
                float: left;
                line-height: 74px;
            }
            .nav .content>.container>.middle>.left>.right>.info {                
                float: left;
                font-size: 18px;
                color: #282828;
                line-height: 74px;
                margin-right: 5px;
            }
            .nav .content>.container>.middle>.left>.right>.info:hover~ .right-menu {
                display: block;
            }
            .nav .content>.container>.middle>.left>.right>.right-menu {
                display: none;
                position: absolute;
                top: 74px;
                left: 0;
                width: 100%;
                height: 404px;
                background-color: aqua;
                text-align: center;
            }
            .nav .content>.container>.middle>.right {
                float: left;
                width: 271px;
                height: 100%;
            }
            .nav .content>.container>.middle>.right>.left-wrapper {
                width: 100%;
                height: 50px;
                margin: 12px 0;
                padding: 0 0 0 30px;
                box-sizing: border-box;
                border-left: 1px solid #dedede;
            }
            .nav .content>.container>.middle>.right>.left-wrapper>.comm {
                float: left;
                height: 100%;
                line-height: 50px;
                font-size: 18px;
                margin-right: 28px;
                cursor: pointer;
            }
            .nav .content>.container>.middle>.right>.left-wrapper>.comm:hover {
                color: aqua;
            }
            .nav .content>.container>.right {
                float: right;
                font-size: 30px;
                height: 100%;
                line-height: 74px;
            }
            /* 设置中间部分样式 */
            .middle {
                width: 100%;
                overflow: hidden;
            }
                /* 设置第一个图片部分的样式 */
            .middle .first {
                position: relative;
                width: 100%;
                height: 743px;
            }
            .middle>.first>.first-picture {
                width: 1366px;
                height: 560px;
                margin: auto;
                background-image: url("https://www-file.huawei.com/-/media/corporate/images/home/big-banner/2020/2/hbanner-earthday-cn.jpg");
            }
            .middle>.first>.first-nav {
                position: relative;
                bottom: 100px;
                width: 1106px;
                height: 183px;
                background-color: #ffffff;
                margin: auto;
                padding: 20px 0;
                box-shadow: 0 0 100px rgba(0, 0, 0, 0.2);
                box-sizing: border-box;
            }
            .middle .first>.first-nav>.common {
                float: left;
                height: 100%;
            }
            .middle .first>.first-nav>.common>a {
                display: block;
                width: 284px;
                height: 133px;
                margin: 10px auto 0px;
            }
            .middle .first>.first-nav>.common>a:hover .content>h3{
                color: rgba(0, 255, 191, 0.658);
            }
            .middle .first>.first-nav>.common>a>.picture {
                float: left;
                width: 64px;
                height: 103px;
                padding: 10px 30px 20px 0;
            }
            .middle .first>.first-nav>.common>a>.picture>img {
                width: 100%;
                height: 100%;
            }
            .middle .first>.first-nav>.common>a> .content {
                float: left;
                width: 190px;
                height: 100%;
            }
            .middle .first>.first-nav>.common>a> .content>h3 {
                font-size: 22px;
                line-height: 34px;
                color: #222222;
                margin: 0 0 5px 0;
            }
            .middle .first>.first-nav>.common>a> .content>p {
                font-size: 18px;
                color: #666666;
            }
            .middle .first>.first-nav>.left {
                width: 354px;
                margin-right: 11px;
            }
            .middle .first>.first-nav>.middle {
                width: 376px;
                padding: 0 11px;
                box-sizing: border-box;
                border-left: 1px solid #d4d4d4;;                
                border-right: 1px solid #d4d4d4;;
            }
            .middle .first>.first-nav>.right {
                width: 354px;
                margin-left: 11px;
            }
                /* 设置第二个图片部分的样式 */
            .middle .second {
                height: 641px;
                width: 1366px;
                margin:0 auto 100px;
                overflow: hidden;
            }
            .middle .second .second-left{
                float: left;
                width: 570px;
                height: 450px;
                border-radius: 4px;
                background: linear-gradient(to bottom right, #15b0e8, #59c8d5);
            }
            .middle .second .second-left .context {
                position: relative;
                height: 450px;
                width: 240px;
                margin: 0 auto;
                border: 1px solid transparent;
            }
            .middle .second .second-left .context:hover>.buyNow>.know-more>span {
                margin-left: 40px;
            }
            .middle .second .second-left .context:hover .image .phone {
                margin-top: -20px;
            }
            .middle .second .second-left .context:hover .image .shodew {
                bottom: -50px;
            }
            .middle .second .second-left .context .novaPro7 {
                width: 100%;
                height: 230px;
                margin-top: 100px;
            }
            .middle .second .second-left .context .novaPro7>img {
                display: block;
                height: 30px;
                width: 100%;
            }
            .middle .second .second-left .context .novaPro7>.focus-on {
                color: #000000;
                font-size: 28px;
                font-weight: bold;
                margin-top: 20px;
            }
            .middle .second .second-left .context .buyNow {
                width: 100%;
                height: 120px;
            }
            .middle .second .second-left .context .buyNow>.bottom {
                font-size: 12px;
                margin-top: 50px;
                color: #000000;
            }
            .middle .second .second-left .context .image {
                position: absolute;
                top: 60px;
                left: 100%;
                width: 264px;
                height: 540px ;
            }
            .middle .second .second-left .context .image img {
                width: 264px;
            }
            .middle .second .second-left .context .image .phone {
                height: 540px ;
                z-index: 10;
                transition: all 0.3s ;
            }
            .middle .second .second-left .context .image .shodew {
                position: absolute;
                z-index: 9;
                left: 0;
                bottom: -40px;
                height: 100px;
                transition: all 0.3s ;
            }
            .middle .second .second-right {
                float: right;
                width: 453px;
                height: 641px ;
                padding: 0 11px;
                margin-right: 119px;
            }
            .middle .second .second-right>img {
                display: block;
                width: 100%;
                height: 240px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            .middle .second .second-right>.matebook {
                position: relative;
                width: 100%;
                height: 400px;
                padding: 40px 60px;
                box-sizing: border-box;
                background-color: #dde6ed;
            }
            .middle .second .second-right>.matebook:hover .know-more>span {
                margin-left: 40px;
            }
            .middle .second .second-right>.matebook>.top {
                width: 100%;
                height: 22px;
                line-height: 22px;
                font-size: 14px;
                color:#666
            }
            .middle .second .second-right>.matebook>.middle {
                height: 238px;
                width: 100%;

            }
            .middle .second .second-right>.matebook>.middle>h2 {
                margin-top: 10px;
                font-size: 38px;
                line-height: 48px;
                font-weight: bold;
                height: auto;
            }
            .middle .second .second-right>.matebook>.middle>p {
                font-size: 18px;
                line-height: 24px;
                margin-top: 12px;
            }
            .middle .second .second-right>.matebook>.know-more {
                position: absolute;
                bottom: 40px;
                color:#222;
                font-size: 22px;                
            }
            .know-more {
                cursor: pointer;
                font-size: 22px;
            }
            .know-more:hover span{               
                margin-left: 40px;
            }
            .know-more>span {
                margin-left: 20px;
                transition: all 0.3s;
            }
                /* 第三个图片的样式 */
            .middle .three {
                width: 1366px;
                height: 700px;
                background-image: url("https://www-file.huawei.com/-/media/corporate/images/home/big-banner/2020/1/telemedical6.jpg");
                margin: 0 auto 100px;
                overflow: hidden;
            }
            .middle .three .three-context {
                height: 36px;
                width: 200px;
                margin: 250px 840px;
                font-size: 22px;
            }
            .middle .three .three-context:hover>.know-more>span {            
                margin-left: 40px;
            }
                /* 第四个图片的样式 */
            .middle .four {
                width: 100%;
                height: 775px;
                padding-bottom: 120px;
                box-sizing: border-box;
            }
            .middle .four .container {
                width: 1128px;
                height: 655px;
                margin: auto;
            }
            .middle  .head {
                width: 1106px;
                height: 39px;
                font-size: 18px;
                margin:0 auto 60px;
            }
            .middle  h2 {
                float: left;
                height: 39px;
                font-size: 38px;
                line-height: 39px;
                font-weight: bold;
                margin: 0;
                padding: 0;
            }
            .middle .four .container .head a {
                display: block;
                height: 39px;
                width: 150px;
                float: right;
                color: #222222;
                line-height: 39px;
                font-size: 22px;
            }
            .middle .four .container .head a span {
                font-size: 18px;
                transition: all 0.3s;
            }
            .middle .four .container .body {
                width: 100%;
                height: 526px;
            }
            .middle .four .container .body .body-left {
                float: left;
                width: 588px;
                height: 406px;
                margin: 60px 0;
                background-color: #dce6ee;;
            }
            .middle .four .container .body .body-left>.container {
                width: 419px;
                height: 300px;
                margin: 53px 40px 53px 129px;
                box-sizing: border-box;
            }
            .middle .four .container .body .body-left>.container>.top {
                width: 100%;
                height: 21px;
                line-height: 21px;
                font-size: 14px;
                color: #666666;;
            }
            .middle .four .container .body .body-left>.container>.middle {
                height: 200px;
                width: 100%;
                font-size: 18px;
            }
            .middle .four .container .body .body-left>.container>.middle>.top {
                font-size: 28px;
                line-height: 38px;
                font-weight: bold;
                margin: 0px;
            }
            .middle .four .container .body .body-left>.container>.middle>span {
                display: block;
                line-height: 30px;
                color: #282828;
            }
            .middle .four .container .body .body-left>.container>span {
                display: block;
                height: 33px;
                width: 100%;
                margin-top: 40px;
                line-height: 33px;
                font-size: 22px;
                color: #282828;
            }
            .middle .four .container .body .body-right {
                float: right;
                width: 540px;
                height: 100%;
                border-radius: 4px;
                background-image: url("https://www-file.huawei.com/-/media/corporate/images/home/event/2020/open-euler-cn.png");
                background-size: cover;
            }
                /* 第五个图片样式 */
            .middle .five {
                width: 100%;
                height: 576px;
                margin-bottom: 60px;
            }
            .middle .five .container {
                width: 1128px;
                height: 655px;
                margin: auto;

            }
            .middle .five .container .title {
                width: 1106px;
                height: 39px;
                margin: 0 auto 60px;
            }
            .middle .five .container .title a {
                display: block;
                height: 39px;
                width: 150px;
                float: right;
                color: #222222;
                line-height: 39px;
                font-size: 22px;
            }
            .middle .five .container .title a span {
                font-size: 18px;
                transition: all 0.3s;
            }
            .middle .five .container .body {
                width: 100%;
                height: 478px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-around;
            }
            .middle .five .container .body .item {
                position: relative;
                width: 310px;
                height: 438px;
                border-radius: 4px;
            }
            .middle .five .container .body .item:hover .item-logo {
                left: -20px;
            }
            .middle .five .container .body .item:hover>.intro>.content>.know-more>span {
                margin-left: 40px;
            }
            .middle .five .container .body .item .intro {
                height: 348px;
                margin-top: 90px;
                overflow: hidden;
                background-color: #dde6ed;
            }
            .middle .five .container .body .item .item-logo {
                position: absolute;
                left: 0;
                top: 0;
                height: 178px;
                width: 100%;
            }
            .middle .five .container .body .item .item-logo img {
                border-radius: 4px 4px 0 0;
            }
            .middle .five .container .body .item .intro .content {
                height: 260px;
                padding: 30px 40px 0;
                width: 100%;
                margin-top: 88px;
                box-sizing: border-box;
            }
            .middle .five .container .body .item .intro>.content>.top {
                height: 21px;
                line-height: 21px;
                width: 100%;
                font-size: 14px;
                color: #666;
            }
            .middle .five .container .body .item .intro>.content>.middl {
                height: 128px;
                width: 100%;                
            }
            .middle .five .container .body .item .intro>.content>.middl>h3 {
                font-size: 22px;
                line-height: 32px;
            }
                /* 第六个图片部分样式 */
            .middle .six {
                width: 100%;
                height: 600px;
                margin-bottom: 100px;
            }
            .middle .six .container {
                width: 1128px;
                height: 600px;
                margin: auto;
            }
            .middle .six .container .head a {
                display: block;
                height: 39px;
                width: 150px;
                float: right;
                color: #222222;
                line-height: 39px;
                font-size: 22px;
            }
            .middle .six .container .head a span {
                font-size: 18px;
                transition: all 0.3s;
            }
            .middle .six .container .body {
                width: 1228px;
                height: 496px;
            }
            .middle .six .container .body .body-left:hover>.bottom>.know-more>span {
                margin-left: 40px;
            }
            .middle .six .container .body .body-left {
                float: left;
                width: 408px;
                height: 100%;
                padding: 0 31px;
            }
            .middle .six .container .body .body-left .top {
                width: 408px;
                height: 220px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                background-image: url("https://www-file.huawei.com/-/media/corporate/images/news4/2020/q1/20200331180107espace.jpg?h=426&la=zh&w=640");
                background-size: cover;
            }
            .middle .six .container .body .body-left .bottom {
                width: 408px;
                height: 276px;
                padding: 30px 40px 0;
                box-sizing: border-box;
                background-color: #dde6ed;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
            .middle .six .container .body>.body-left>.bottom>.top {
                height: 21px;
                line-height: 21px;
                width: 100%;
                font-size: 14px;
                color: #666;
                background-image: none;
            }
            .middle .six .container .body .body-left .bottom>.middl {                
                height: 128px;
                width: 100%;                
            }
            .middle .six .container .body .body-left .bottom>.middl>h3 {
                font-size: 22px;
                line-height: 32px;
            }
            .middle .six .container .body .body-right {
                float: left;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-between;
                width: 564px;
                height: 100%;
                padding: 0 101px 0 11px;
                margin-left: 94px;
                box-sizing: border-box;
            }
            .middle .six .container .body .body-right .item {
                height: 80px;
                width: 100%;
            }
            .middle .six .container .body .body-right .item .title {
                height: 21px;
                font-size: 14px;
                line-height: 21px;
                color:#666; ;
            }
            .middle .six .container .body .body-right .item a {
                display: block;
                height: 59px;
                font-size: 18px;
                line-height: 30px;
                color: #282828;
            }
            .middle .six .container .body .body-right .item a:hover {
                text-decoration: underline;
            }
            /* 底部样式 */
            .foot {
                width: 100%;
                height: 813px;
                padding-top: 60px;
                box-sizing: border-box;
                background-color: #f0f0f0;
            }
            .foot>.container {
                width: 1128px;
                height: 653px;
                margin: auto;
            }
            .foot>.container .top {
                width: 1128px;
                height: 340px;
                margin: 0 auto 20px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
            }
            .foot>.container .top .item {
                width: 282px;
                height: 340px;
                padding: 0 11px;
                box-sizing: border-box;
            }
            .foot>.container .top .item a:hover {
                text-decoration: underline;
            }
            .foot>.container .top .item .title {
                display: block;
                width: 100%;
                height: 35px;
                margin-bottom: 20px;
                line-height: 35px;
                font-size: 22px;
                font-weight: bold;
            }
            .foot>.container .top .item .info {
                display: block;
                height: 25px;
                width: 100%;
                margin-bottom: 10px;
                font-size: 16px;
                columns: #222222;
            }
            .foot>.container .top .item .item-left {
                float: left;
                width:166px;
                margin-right: 11px;
            }
            .foot>.container .top .item .item-right {
                float: right;
                width:72px;
                height: 100%;
                margin-left: 11px;
            }
            .foot>.container .top .item .item-right div {
                display: block;
                margin-bottom: 30px;
                color: #282828;
                width: 100%;
                font-size: 22px;
                cursor: pointer;
            }
            .foot>.container .top .item .item-right div:hover {
                opacity: 0.5;
            }
            .foot>.container .bottom {
                width: 1128 px;
                height: 292px;
            }
            .foot>.container .bottom .head {
                width: 1106px;
                height: 35px;
                margin: 0 auto 20px;
                font-size: 22px;
                font-weight: bold;
            }
            .foot>.container .bottom .part {
                width: 1106px;
                height: 70px;
                margin: 0 auto 20px;
                display: flex;
                flex-flow: row wrap;
            }
            .foot>.container .bottom .part .part-item {
                display: block;
                width: 260px;
                height: 35px;
                font-size: 16px;
                line-height: 25px;
                padding: 0 0 10px 10px;
            }
            .foot>.container .bottom .part .part-item:hover {
                text-decoration: underline;
            }
            .foot .copy {
                width: 100%;
                height: 40px;
                margin-top: 60px;
                background-color: #222222;
            }
            .foot .copy>.container {
                width: 1128px;
                height: 40px;
                display: flex;
                margin: 0 auto 0;
                flex-flow: row nowrap;
                justify-content: space-between;
            }
            .foot .copy>.container>.left {
                width: 542px;
                height: 40px;
                line-height: 40px;
                padding: 0 11px;
                font-size: 14px;
                color: #fff;
                float: left;
            }
            .foot .copy>.container>.right {
                float: right;
                width: 252px;
                height: 40px;
                padding: 0 11px;
                line-height: 40px;
                font-size: 14px;
                color:#fff
            }
        </style>
    </head>

    <body>
        <div class="nav">
            <div class="top">
                <div class="container">
                    <span>集团网站&nbsp;</span>
                    <span class="fa fa-angle-down"></span>
                    <div class="right">                        
                        <span class="fa "></span>
                        <span>选择区域/语言</span>
                        <span class="fa fa-angle-down"></span>
                        <span>|</span>
                        <span class="fa fa-lock"></span>                
                        <span >登陆</span>
                    </div>
                </div>  
            </div>
            <div class="content">
                <div class="container">
                    <div class="left">
                        <img src="https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png" width="100%">
                    </div>
                    <div class="middle">
                        <div class="left">
                            <div class="left">
                                <span class="fa fa-mobile-phone fa-3x" style="margin-right: 20px;"></span>
                                <div class="info">手机、笔记本&平板...</div>
                                <span class="fa fa-angle-down fa-1x"></span>
                                <div class="left-menu">
                                    桃花坞里桃花庵，桃花庵下桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。<br>
                                    酒醒只在花前坐，酒醉还来花下眠；半醒半醉日复日，花落花开年复年。<br>
                                    但愿老死花酒间，不愿鞠躬车马前；车尘马足富者趣，酒盏花枝贫者缘。<br>
                                    若将富贵比贫贱，一在平地一在天；若将贫贱比车马，他得驱驰我得闲。<br>
                                </div>
                            </div>
                            <div class="right">
                                <span class="fa fa-server fa-2x" style="margin-right: 20px;"></span>
                                <div class="info">解决方案&服务</div>
                                <span class="fa fa-angle-down fa-1x"></span>
                                <div class="right-menu">
                                    桃花坞里桃花庵，桃花庵下桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。<br>
                                    酒醒只在花前坐，酒醉还来花下眠；半醒半醉日复日，花落花开年复年。<br>
                                    但愿老死花酒间，不愿鞠躬车马前；车尘马足富者趣，酒盏花枝贫者缘。<br>
                                    若将富贵比贫贱，一在平地一在天；若将贫贱比车马，他得驱驰我得闲。<br>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="left-wrapper">
                                <div class="comm">华为商城</div>
                                <div class="comm">华为云</div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <span class="fa fa-search"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="first">
                <div class="first-picture"></div>
                <div class="first-nav">
                    <div class="left common">
                        <a href="">
                            <div class="picture">
                                <img src="https://www-file.huawei.com/-/media/corporate/images/home/head-pic/p40-panel.png">
                            </div>
                            <div class="content">
                                <h3>个人用户</h3>
                                <p>手机，笔记本和平板等个人及家用产品</p>
                            </div>
                        </a>
                    </div>
                    <div class="middle common">                        
                        <a href="">
                            <div class="picture">
                                <img src="https://www-file.huawei.com/-/media/corporate/images/home/head-pic/p40-panel.png">
                            </div>
                            <div class="content">
                                <h3>企业用户</h3>
                                <p>企业商用产品、解决方案及云服务</p>
                            </div>
                        </a>
                    </div>
                    <div class="right common">                        
                        <a href="">
                            <div class="picture">
                                <img src="https://www-file.huawei.com/-/media/corp/index/banner-nav-img03.png">
                            </div>
                            <div class="content">
                                <h3>运营商用户</h3>
                                <p>运营商网络解决方案、产品及服务</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="second">
                <div class="second-left">
                    <div class="context">
                        <div class="novaPro7">
                            <img src="https://www-file.huawei.com/-/media/corporate/images/home/small-banner/2020/nova7pro.png?la=zh">
                            <h3 class="focus-on">你在焦点在</h3>
                        </div>
                        <div class="buyNow">                            
                            <span class="know-more">
                                了解更多
                                <span class="fa fa-arrow-right" style="transition: all 0.3s ;"></span>
                            </span>
                            <div class="bottom">*图片仅供参考，请以实物为准 </div>
                        </div>
                        <div class="image">
                            <img class="phone" src="https://www-file.huawei.com/-/media/corporate/images/home/small-banner/2020/nova-7pro-2.png?la=zh">
                            <img class="shodew" src="https://www.huawei.com/en/~/media/Corp/Index/products-phone-img-bg.png">
                        </div>
                    </div>
                </div>
                <a href="" class="second-right">
                    <img src="https://www-file.huawei.com/-/media/corporate/images/home/small-banner/2020/matebook-series.jpg"></img>
                    <div class="matebook">
                        <div class="top">产品</div>
                        <div class="middle">
                            <h2>HUAWEI MateBook 系列</h2>
                            <p>搭载2K触控全面屏，它兼具轻薄和性能于一身，同时搭载多屏协同功能，让手机和笔记本跨平台互动更便捷，配合屏幕触控功能，给多屏协同更好的使用体验。 </p>
                        </div>
                        <span class="know-more">
                            了解更多
                            <span class="fa fa-arrow-right" style="transition: all 0.3s ;"></span>
                        </span>
                        <div class="bottom">*图片仅供参考，请以实物为准 </div>
                    </div>
                </a>
            </div>
            <div class="three">
                <div class="three-context">
                    <span class="know-more">
                        了解更多
                        <span class="fa fa-arrow-right" style="transition: all 0.3s ;"></span>
                    </span>
                </div>    
            </div>
            <div class="four">
                <div class="container">
                    <div class="head">
                        <h2>展会活动</h2>
                        <a class="know-more" href="">查看全部
                            <span class="fa fa-arrow-right"></span>
                        </a>
                    </div>
                    <div class="body">
                        <div class="body-left">
                            <div class="container">
                                <div class="top">展会活动</div>
                                <div class="middle">
                                    <h3 class="top">openEuler 峰会 2020</h3>
                                    <span>线上直播 | 2020年4月17日 - 18日</span>
                                    <span style="margin-top: 12px;">与全球开发者共建开放、多元和包容的软件生态体系</span>
                                </div>
                                <span class="know-more">
                                    了解更多
                                    <span class="fa fa-arrow-right" style="transition: all 0.3s ;"></span>
                                </span>
                            </div>
                        </div>
                        <div class="body-right"></div>
                    </div>
                </div>
            </div>
            <div class="five">
                <div class="container">
                    <div class="title">
                        <h2>成功故事</h2>
                        <a class="know-more" href="">查看全部
                            <span class="fa fa-arrow-right"></span>
                        </a>
                    </div>
                    <div class="body">
                        <div class="item">
                            <div class="item-logo">
                                <img src="https://www-file.huawei.com/-/media/corporate/images/home/small-banner/2020/hexa.jpg" height="178px" width="100%">
                            </div>
                            <div class="intro">
                                <div class="content">
                                    <div class="top">成功故事</div>
                                    <div class="middl">
                                        <h3>AI淬炼传统经验，让美味代代相传
                                        </h3>
                                    </div>
                                    <a class="know-more" href="">更多
                                        <span class="fa fa-arrow-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-logo">
                                <img src="https://www-file.huawei.com/-/media/corporate/images/home/small-banner/2020/cloud-based-class.png" height="178px" width="100%">
                            </div>
                            <div class="intro">
                                <div class="content">                                    
                                    <div class="top">成功故事</div>
                                    <div class="middl">
                                        <h3>“云上”开学季，华为云联合百余家教育伙伴发起“随时学教育联盟”
                                        </h3>
                                    </div>
                                    <a class="know-more" href="">更多
                                        <span class="fa fa-arrow-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-logo">
                                <img src="https://www-file.huawei.com/-/media/corporate/images/case-studies/2020/southern-power-grid-314.jpg" height="178px" width="100%">
                            </div>
                            <div class="intro">
                                <div class="content">                                 
                                    <div class="top">成功故事</div>
                                    <div class="middl">
                                        <h3>从20天到2小时，南方电网深圳供电局巡检效率提升了80倍
                                        </h3>
                                    </div>
                                    <a class="know-more" href="">更多
                                        <span class="fa fa-arrow-right"></span>
                                    </a>                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="six">
                <div class="container">
                    <div class="head">
                        <h2>近期新闻</h2>
                        <a class="know-more" href="">查看全部
                            <span class="fa fa-arrow-right"></span>
                        </a>
                    </div>
                    <div class="body">
                        <div class="body-left">
                            <div class="top"></div>
                            <div class="bottom">                                
                                <div class="top">新闻|2020年03月31日</div>
                                <div class="middl">
                                    <h3>华为发布2019年年度报告：稳健经营，为客户和社会创造更大价值
                                    </h3>
                                </div>
                                <a class="know-more" href="">更多
                                    <span class="fa fa-arrow-right"></span>
                                </a>
                            </div>
                        </div>
                        <div class="body-right">
                            <div class="item">
                                <div class="title">新闻 |  2020年04月23日</div>
                                <a href="">
                                    华为举办“5G+，Better World”线上峰会，发布抗疫和洞察实践白皮书
                                </a>
                            </div>
                            <div class="item">
                                <div class="title">新闻 |  2020年04月23日</div>
                                <a href="">                                    
                                    北京联通携手华为发布业界首个智能加速的学习宽带，重塑F5G时代家庭在线教育体验
                                </a>
                            </div>
                            <div class="item">
                                <div class="title">新闻 |  2020年04月23日</div>
                                <a href="">                                    
                                    “可靠高效、智能低噪”，华为发布新一代直流快充模块HUAWEI  HiCharger                                    
                                </a>
                            </div>
                            <div class="item">
                                <div class="title">新闻 |  2020年04月23日</div>
                                <a href="">
                                    华为发布2020年一季度经营业绩
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="container">
                <div class="top">
                    <div class="item">
                        <a href="" class="title">关于华为&nbsp;&nbsp;></a>
                        <a href="" class="info">公司简介</a>
                        <a href="" class="info">公司治理</a>
                        <a href="" class="info">管理层信息</a>
                        <a href="" class="info">可持续发展</a>
                        <a href="" class="info">信任中心</a>
                        <a href="" class="info">债券投资者关系</a>
                        <a href="" class="info">公共政策</a>
                        <a href="" class="info">出版物</a>
                    </div>
                    <div class="item">
                        <a href="" class="title">新闻 & 展会&nbsp;&nbsp;></a>
                        <a href="" class="info">新闻</a>
                        <a href="" class="info">展会活动</a>
                        <a href="" class="info">公司年报</a>
                        <a href="" class="info">媒体图库</a>
                        <a href="" class="info">媒体联系</a>
                    </div>
                    <div class="item">
                        <a href="" class="title">行业洞察&nbsp;&nbsp;></a>
                        <a href="" class="info">行业研究</a>
                        <a href="" class="info">行业展望</a>
                        <a href="" class="info">热点技术</a>
                        <a href="" class="info">创新</a>
                    </div>
                    <div class="item">
                        <div class="item-left">                            
                            <div href="" class="title">技术支持</div>
                            <a href="" class="info">消费者技术支持</a>
                            <a href="" class="info">企业技术支持</a>
                            <a href="" class="info">运营商技术支持</a>
                            <a href="" class="info">安全通告</a>
                        </div>
                        <div class="item-right">
                            <div class="fa fa-weibo"></div>
                            <div class="fa fa-weibo"></div>
                            <div class="fa fa-weixin"></div>
                            <div class="fa fa-weixin"></div>
                            <div class="fa fa-weixin"></div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="head"">业务入口</div>
                    <div class="part">
                        <a href="" class="part-item">
                            招聘
                        </a>
                        <a href="" class="part-item">
                            开发者
                        </a>
                        <a href="" class="part-item">
                            合作伙伴
                        </a>
                        <a href="" class="part-item">
                            产品定义社区
                        </a>
                        <a href="" class="part-item">
                            供应商
                        </a>
                        <a href="" class="part-item">
                            除名查询
                        </a>
                    </div>
                    <div class="head"">相关网站</div>
                    <div class="part">
                        <a href="" class="part-item">
                            华为商城
                        </a>
                        <a href="" class="part-item">
                            华为云
                        </a>
                        <a href="" class="part-item">
                            华为智能光伏
                        </a>
                        <a href="" class="part-item">
                            华为心声社区
                        </a>
                        <a href="" class="part-item">
                            华为海洋
                        </a>
                        <a href="" class="part-item">
                            荣耀官网
                        </a>
                    </div>
                </div>
            </div>
            <div class="copy">
                <div class="container">
                    <div class="left">
                        <span>©2020 华为技术有限公司&nbsp;&nbsp;</span>
                        <a href="">粤A2-20044005号&nbsp;&nbsp;</a>
                        <a href="">粤公网安备 44030702002388号</a>
                    </div>
                    <div class="right">
                        <a href="">联系我们&nbsp;&nbsp;</a>
                        <span>|&nbsp;&nbsp;</span>
                        <a href="">法律声明&nbsp;&nbsp;</a>
                        <span>|&nbsp;&nbsp;</span>
                        <a href="">隐私政策</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        (
            function() {
                let before = document.documentElement.scrollTop || document.body.scrollTop;
                let ele = document.querySelector(".nav .content");
                let action = function(){
                    let after = document.documentElement.scrollTop || document.body.scrollTop;
                    if( after==0 ){
                        ele.style.overflow="visible";
                        ele.style.top="28px";
                        ele.style.height="74px";
                    }
                    else if( after-before>0 ) {
                        ele.style.overflow="visible";
                        ele.style.top="0px";
                        ele.style.height="74px";
                    }
                    else {
                        ele.style.overflow="hidden";
                        ele.style.height="0px";
                    }
                    before = after;
                };
                document.addEventListener('scroll',action,false)
            }
        )();
    </script>
</html>